<template>
	<div id="liandong">
		<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<a href="#/address01">
					<div class="left-arrow">
						<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
					</div>
				</a>
				<div class="head-center">
					<p>添加新地址</p>
				</div>
				<a href="#/address02">
				<div class="success">
					<p>完成</p>
				</div>
				</a>
			</div>
		</div>
		<!--内容-->
		<div class="headbg">
			<p>请使用您的真实姓名,否则订单将无法发出</p>
		</div>
		<input type="text" name="naem" id="name03" placeholder="请填写真实姓名" />
		<br />
		<input type="text" name="shoujihao" id="shoujihao" placeholder="请填写手机号" />
		<br />
		<input type="text" name="shoujihao" id="city" placeholder="请选择城市" />
		<!--三级联动-->
		<city></city>
		<br />
		<input type="text" name="shoujihao" id="xiangxi" placeholder="请填写详细地址" />
		<br />
		<input type="text" name="shoujihao" id="youbian" placeholder="请填写邮编" />
	</div>
</template>

<script>
	import city from 'v-distpicker'
	export default {
  components: {
  	city  
  },
  	methods:{
			address03:function(){
				$("#city").click(function(){
					$(".address").slideDown(1000);
				});
				$("#xiangxi").click(function(){
					$(".address").slideUp(1000);
				});
			}
		},
		mounted: function() {
			this.address03();
		}
}
</script>

<style>
	html {
		background: #f2f2f2;
	}
	
	#app {
		overflow: hidden;
	}
	
	.head-bg {
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
	}
	
	.shezhi-content {
		border: 0.1rem solid darkgray;
	}
	
	.head-black {
		margin: 0 auto;
		padding-top: 3.1rem;
		display: flex;
		justify-content: space-between;
		width: 95%;
	}
	
	.left-arrow img {  
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.head-center {
		font-size: 3.4rem;
		color: white;
		margin-left: 5rem;
	}
	
	.success {
		color: white;
		font-size: 3rem;
	}
	.headbg{
		width: 100%;
		height: 8rem;
	}
	.headbg p{
		color: red;
		font-size: 2.7rem;
		text-align: left;
		margin-left: 2rem;
		line-height: 8rem;
	}
	#name03,#shoujihao,#city,#xiangxi,#youbian{
		width: 100%;
		height: 10rem;
		font-size: 2.8rem;
		border:0.1rem solid darkgray;
	}
	#shoujihao{
		margin-top: 2rem;
	}
	.address{
		display: none;
		width: 100%;
		height: 10rem;
		position: absolute;
		left: 0;
		top: 40rem;
	}
	.address select{
		font-size: 3rem;
		/*width: 22rem;*/
		height: 10rem;
		border: 0.1rem dashed firebrick;
		background: black;
		color: cyan;
	}
	#liandong{
		position: relative;
		width: 100%;
	}

</style>